<template>
    <login-register>
        <div class="login-from-wrap">
            <div style="text-align:left; margin-bottom:1.1rem;">重新设置密码</div>
        <el-alert title="忘记密码了？请输入您的邮箱，将发送重设邮件到您的邮箱。" 
                 type="warning" class="forget-tip">
        </el-alert>
        <div class="login-group">
            <label for="email">邮件地址</label>
            <div class="login-group-input-wrap">
            <el-input
                id="email"
                v-model="email"
                type="text"
                placeholder="请输入邮箱"
                auto-complete="off"
                />
            </div>
        </div>
        <br>
        <button class="login-button" @click="handleSubmit()">确定</button>
        <div class="login-floor">
            <el-button type="text" style="color:#57a3f3;cursor:pointer;" @click="openModal">
                收不到邮件
            </el-button>
        </div>
        </div>

    </login-register>
    
</template>

<script>
import loginRegister from '../../components/loginRegister/index.vue';
export default {
    components: {loginRegister},
    data() {
        return {
            email: '',
        }
    },
    methods: {
        async handleSubmit() {
            var fd = new FormData();
            fd.append("email", this.email);
            const {data: res} = await this.$http.post('/common/mail/send-back-password-email', fd);
            if(res.success) {
                this.$message.success("发送邮件成功，请注意查看");
            } else {
                this.$message.error(res.message);
            }

        },
        openModal() {
            this.$alert('请尝试到广告邮件、订阅邮件、垃圾邮件等目录找找看。', '收不到邮件?', {
            confirmButtonText: '确定',
            });
        }

    }
}
</script>

<style scoped>
@import url('../../assets/css/login.css');
.forget-tip {
  margin: 5px;
  color: rgba(0, 0, 0, 0.65);
}
.login-group {
  margin-top: 40px;
}
</style>